<template>
  <Transition :name="transitionType">
    <component :is="currentComponent" v-bind="$attrs"></component>
  </Transition>
</template>
<script setup>
import { defineAsyncComponent, shallowRef, onMounted } from 'vue'
import ErrorComponent from './ErrorComponent'
/**
 * 异步组合导入
 * @author 朱琦
 * @date   时间：2022/10/29
 */
const props = defineProps({
  component: {
    type: String,
    default: null
  },
  transitionType: {
    type: String,
    default: 'v'
  },
  // 异步加载组件路径
  path: {
    type: String,
    default: '/business-component/modules'
  }
})
const currentComponent = shallowRef(null)

onMounted(() => {
  currentComponent.value = asyncComp
})

const asyncComp = defineAsyncComponent({
  // 加载函数
  loader: () => import(`@/views${props.path}/${props.component}`),

  // 加载异步组件时使用的组件
  // loadingComponent: LoadingComponent,
  // 展示加载组件前的延迟时间，默认为 200ms
  // delay: 200,

  // 加载失败后展示的组件
  errorComponent: ErrorComponent
  // 如果提供了一个 timeout 时间限制，并超时了
  // 也会显示这里配置的报错组件，默认值是：Infinity
  // timeout: 3000
})
</script>
<style lang="less" scoped>
@import url(~@/assets/styles/transition.less);
</style>
